$(function() {
  
    var navType = '0'; // 导航数据 对应data-type
    var navValue = ''; // 导航数据 对应data-val
    var winWidth = $(window).width();
    var winHeight = $(window).height();
    console.log(winHeight)

    // 获取接口数据
    function fetchData(url, callback) {
        // $.ajax({
        //     url: url,
        //     method: 'get',
        //     success: function(data) {
        //         // 获取数据后更新图标
        //         callback(data);
        //     }
        // });
        callback();
    }
    // 复制配置项，因为每次setOption可能会重叠，所以操作副本
    function copyOption(option) {
        return JSON.parse(JSON.stringify(option));
    }
    // 导航
    function initNav() {
        new Swiper(".swiper-container", {
            freeMode: true, // 自由滑动
            slidesPerView: 'auto' //可见区显示的个数
        });

        $('.swiper-wrapper').on('click', '.swiper-slide', function(e) {
            navType = this.dataset.type;
            navValue = this.dataset.val;
            // 切换时的样式
            $(this).addClass('cur-slide').siblings().removeClass('cur-slide');

            initChart(); // 切换时，重新画图
            console.log('导航数据：', navType, navValue)
        });
    }
    // 左侧饼图
    function initLeftChart(linkOption) {
        var option, data;
        var myChart = echarts.init(document.querySelector('.left-chart'));
        if (navType == '0' || navType == '1' || navType == '2') {
            option =  copyOption(utils.pieOption);
        }
        myChart.setOption(option);

        fetchData('./t', function() {
            data = utils.testData.pieData; // 测试数据
            myChart.setOption(data);
        });

        // 有联动时修改option data数据
        if (linkOption) {
            myChart.setOption(linkOption);
        }
        
        // 单击事件，params为地饼图点击部分数据
        myChart.on('click', function(params){
            console.log('饼图点击数据：', params);
            // 联动中国地图
            initChinaChart({
                series: [{
                    data: [
                        {name: '青海', selected: true},
                        {name: '陕西', selected: true},
                        {name: '湖南', selected: true}
                    ]

                }]
            });
            // alert(3)
        });

        // 双击事件，params为地饼图点击部分数据
        myChart.on('dblclick', function(params){
            console.log('饼图点击数据：', params);
            $('.left-chart').hide();
            $('.table-wrap').show();
        });
        
        // 随浏览器框宽度自适应
        window.addEventListener('resize', function() {
            setChartSize();
            myChart.resize();
        });
    }
    // 表格
    function initTable() {
      
        // 表格返回
        $('.table-return').click(function() {
            // console.log('r')
            $('.table-wrap').hide();
            $('.left-chart').show();
            setChartSize();
        });

        var $table = $('#table')
        // 获取数据渲染表格
        fetchData('./t', function() {
            var data = utils.testData.tableData;
            $table.bootstrapTable({data: data});
            
            // 展开项
            // 没有展开的项
            var noExpand = [0, 2];
            noExpand.forEach(function(item) {
                var t = $table.find('tbody tr').eq(item).children().eq(0);
                t.html('');
            });
            

            function detailFormatter(index, row) {
                console.log(index, row);
                
                return '<div class="inner-td" data-id="' + row.id + '" data-value="' + row.value + '" ><span class="iner-td1">' + row.id + '：</span><span class="inner-td2">1000</span></div>'
                
            }
            window.detailFormatter = detailFormatter;
        });
        $table.on('click', 'td', function() {
            if ($(this).text() === '详情') {
                var tr = $(this).parent().children();
                var id = tr.eq(1).text();
                var value = tr.eq(2).text();
                console.log('表格行信息', id, value);

                // 表格跳转图表
                $('.table-wrap').hide(); 
                $('.move-column-chart-wrap').show(); // 展示动态柱状图
                setChartSize();
                initMoveColumnChart();
            }
        });

        // 展开项交互
        $table.on('click', '.inner-td', function() {
            console.log('展开项数据:', this.dataset.id, this.dataset.value)
        });

        
    }

    // 动态柱状图
    function initMoveColumnChart() {
        var myChart = echarts.init(document.querySelector('.move-column-chart'));
        var option = copyOption(utils.moveColumnOption);
        myChart.setOption(option);
        var count = 11;
        setInterval(function (){
            axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
        
            var data0 = option.series[0].data;
            var data1 = option.series[1].data;
            data0.shift();
            data0.push(Math.round(Math.random() * 1000));
            data1.shift();
            data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
        
            option.xAxis[0].data.shift();
            option.xAxis[0].data.push(axisData);
            option.xAxis[1].data.shift();
            option.xAxis[1].data.push(count++);
        
            myChart.setOption(option);
        }, 2100);

        // 柱状图返回
        $('.move-chart-return').click(function() {
            $('.move-column-chart-wrap').hide();
            $('.table-wrap').show();
            setChartSize();
            // myChart.resize();
            
        });

        // 随浏览器框宽度自适应
        window.addEventListener('resize', function() {
            setChartSize();
            myChart.resize();
        });

    }

    
    // 设置图标宽高比例自适应
    function setChartSize() {
        // 左侧图
        var leftChart = document.querySelector('.left-chart');
        // leftChart.style.height = leftChart.clientWidth * 0.85 + 'px';
        leftChart.style.height = winHeight * 0.45 + 'px';
        
        // 左侧移动柱状图
        var leftMoveChart = document.querySelector('.move-column-chart');
        // leftMoveChart.style.height = leftMoveChart.clientWidth * 1.2 + 'px';
        leftMoveChart.style.height = winHeight * 0.4 + 'px';

        // 中国地图
        var chinaMap = document.querySelector('.china-chart');
        // chinaMap.style.height =  chinaMap.clientWidth * 0.75 + 'px';
        chinaMap.style.height =  winHeight * 0.77 + 'px';

        // 中下方横向柱状图 bottom-chart
        var bottomChart = document.querySelector('.bottom-chart');
        // chinaMap.style.height =  chinaMap.clientWidth * 0.22 + 'px';
        bottomChart.style.height =  winHeight * 0.21 + 'px';

        // 右上图
        var rightUpChart = document.querySelector('.right-up-chart');
        // rightUpChart.style.height = rightUpChart.clientWidth * 0.85 + 'px';
        rightUpChart.style.height = winHeight * 0.33 + 'px';

        // 右下图
        var rightDownChart = document.querySelector('.right-down-chart');
        // rightDownChart.style.height = rightDownChart.clientWidth * 0.85 + 'px';
        rightDownChart.style.height = winHeight * 0.33 + 'px';

        // 左侧
        // $('.left-up-wrap').height(winHeight * 0.2);
        // $('.left-middle-wrap').height(winHeight * 0.4);
        // $('.left-down-wrap').height(winHeight * 0.4);

        // 右侧
        // $('.nav-tab').height(winHeight * 0.1 > 55 ? 55 : winHeight * 0.1);
        // $('.right-up-chart-wrap').height(winHeight * 0.45);
        // $('.right-up-chart-wrap').height(winHeight * 0.45);
    }

    // 中国地图
    function initChinaChart(linkOption) {
        var myChart = echarts.init(document.querySelector('.china-chart'));
        var option = copyOption(utils.chinaOption);
        myChart.setOption(option);

        fetchData('./t', function() {
            myChart.setOption(option);
        })

        // 有联动时修改option data数据
        if (linkOption) {
            myChart.setOption(linkOption);
        }

        // 点击事件，params为地区数据
        myChart.on('click', function(params){
            console.log('地图点击数据：', params);
            // 右侧title改变，其他地方的title等数据改变类似，都是操作jquery获取元素，改变文本
            $('.right-up-chart-wrap .title-up').text(params.name + '环比分析图')
            $('.right-up-chart-wrap .title-down').text(params.name + '环比分析图')
            $('.bottom-chart-wrap .title').text(params.name + '能源消耗情况')

            
            initLeftChart({
                title: {
                    subtext: params.name + '地区累计值'
                }
            })
        });
        // 随浏览器框宽度自适应
        window.addEventListener('resize', function() {
            setChartSize();
            myChart.resize();
        });
        
        
    }

    // 中间下方横向柱状图
    function initBottomChart(linkOption) {
        var myChart = echarts.init(document.querySelector('.bottom-chart'));
        var option = copyOption(utils.horColumnOption);
        myChart.setOption(option);

        fetchData('/t', function() {
            var data = utils.testData.middleDownData;
            myChart.setOption(data);
        });

        // 单击事件，params为地饼图点击部分数据
        myChart.on('click', function(params){
            console.log('饼图点击数据：', params);
            var myChart = echarts.init(document.querySelector('.china-chart'));
            myChart.setOption({
                series: [{
                    data: [
                        {name: '青海', selected: true},
                        {name: '陕西', selected: true},
                        {name: '湖南', selected: true}
                    ]

                }]
            });
        });

        if (linkOption) {
            myChart.setOption(linkOption);
        }
        // 随浏览器框宽度自适应
        window.addEventListener('resize', function() {
            setChartSize();
            myChart.resize();
        });
    }

    // 处理右侧南丁格尔图数据为空则显示灰色，并且有值
    // 不能直接指定某一块的颜色，颜色是依次循环使用的，所以判断有0时，将某一块颜色设为灰色
    function dealRosePieEmptyVal(data) {
        var optionColor = ['#3bc2a2', '#6397ff','#3d6bd2','#2148a4', '#f3e5d3', '#494498', '#777ca6', '#47b8a5', '#762ce9', '#3bc2a2', '#6397ff','#3d6bd2'];
        var sum = 0;
        var aveVal = 0;
        for (var i = 0, len = data.length; i < len; i++) {
            sum += data[i].value;
        }
        var aveVal = Math.floor(sum / data.length / 2); // 值为0则取平均数的一半并取整
        for (var i = 0, len = data.length; i < len; i++) {
            if (data[i].value <= 0) {
                data[i] = {value: aveVal, name: data[i].name};
                optionColor[i] = 'grey';
            }
        }
        return {
            sum: sum,
            newData: data,
            newColor: optionColor
        }
    }
    // 右侧上方图
    function initRightUpChart() {
        var option;
        if (navType == '0') {
            option = copyOption(utils.rosePie);
        } else if (navType == '1') {
            option = copyOption(utils.horColumnOption);
        } else if (navType == '2') {
            option = copyOption(utils.horColumnOption);
        }

        var myChart = echarts.init(document.querySelector('.right-up-chart'));
        myChart.setOption(option, true); // true表示清理数据，重新初始化，没有true表示重叠上次数据使用
        
        fetchData('/t', function() {
            // var data = utils.testData.rightUpData;
            // myChart.setOption(data);
        });

        // 点击事件，params为地区数据
        myChart.on('click', function(params){
            console.log('点击数据：', params);

            // 联动左侧饼图
            initLeftChart({
                title: {
                    subtext: params.name + '地区累计值'
                }
            });
            // 联动中国地图
            // 联动中国地图
            initChinaChart({
                series: [{
                    data: [
                        {name: '新疆', selected: true},
                        {name: '山东', selected: true},
                        {name: '四川', selected: true}
                    ]

                }]
            });

            // 联动下方柱图
            initBottomChart({
                series: [{
                    data: [220, 232, 201, 234, 190, 130, 110, 125]
                }]
            })

        });
        
        // 随浏览器框宽度自适应
        window.addEventListener('resize', function() {
            setChartSize();
            myChart.resize();
        });
    }

    // 右侧下方图
    function initRightDownChart() {
        var option;
        if (navType == '0') {
            option = copyOption(utils.rosePie);
        } else if (navType == '1') {
            option = copyOption(utils.horColumnOption);
        } else if (navType == '2') {
            option = copyOption(utils.horColumnOption);
        }

        var myChart = echarts.init(document.querySelector('.right-down-chart'));
        myChart.setOption(option, true);

        fetchData('/t', function() {
            var data = [
                {value:0, name:'2008'},
                {value:110, name:'2009'},
                {value:234, name:'2010'},
                {value:135, name:'2011'},
                {value:148, name:'2012'},
                {value:251, name:'2013'},
                {value:147, name:'2014'},
                {value:102, name:'2015'},
                {value:147, name:'2016'},
                {value:102, name:'2017'},
                {value:102, name:'2018'},
                {value:102, name:'2019'},
            ];
            
            // 处理为空数据
            var dealData = dealRosePieEmptyVal(data);
            myChart.setOption( {
                color: dealData.newColor,
                series: [
                    {
                        data: dealData.newData
                    }
                ],
                tooltip: {
                    formatter: function(param) {
                        console.log(param);
                        if (param.color === 'grey') {
                            return param.data.name + ':0 (0%)'; // 为0，悬浮框也同步为0
                        } else {
                            // 注意：因为为空数据本身也赋值了，所以百分比需要除开控制，自己算
                            return param.data.name + ': ' + param.data.value + ' (' + Math.round(param.data.value / dealData.sum * 10000) / 100 + '%)';
                        }
                    }
                }
            });
            // myChart.setOption(data);
        });

        // 随浏览器框宽度自适应
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    }

  
    // 首次加载页面时的loading动画，逻辑是请求完数据的一段时间后，隐藏longding动画，显示主页面
    function loadData() {
        var wrapper = $('.wrapper');
        var loadWrap = $('.load-wrap');
        wrapper.css('visibility', 'hidden');
        loadWrap.show();
        setTimeout(function() {
            loadWrap.hide();
            wrapper.css('visibility', 'visible');
        }, 800)
    }
   
    // 图表初始化
    // navType 表示标签切换的类型。如tab标签前5个表示'0',第6个表示'1',第7个表示'2'，对应不同的图标option
    // val 表示标签本身的值，对应图标不同的data数据
    function initChart() {

        initLeftChart();
        initTable();

        initChinaChart();
        initBottomChart();

        initRightUpChart();
        initRightDownChart();
    };

    // 初始化
    function init() {
        setChartSize();
        loadData();
        initNav();
        initChart();
    }
    init();
    
});